<template>
    <div class="container">
        <div class="personinfo">
            <div class="headerInfo">
                <div>
                    <el-link type="primary">编辑信息</el-link>
                </div>
                <div class="avatar">
                    <img src="@/assets/3.jpg">
                    <div>
                        <h3 style="text-align: center;">月下观鸟</h3>
                    </div>
                </div>
                <div class="content">
                    <div>
                        <span style="font-size: 20px;">个性签名：</span>
                        <span>喜欢在月下看鸟kokok是的是的</span>
                    </div>
                    <div class="detialinfo" style="margin-top: 20px;">
                        <ul>
                            <li><span>地区：</span><span>北京</span></li>
                            <li><span>性别：</span><span>男</span></li>
                            <li><span>邮箱：</span><span>2109546706@qq.com</span></li>
                            <li><span>电话：</span><span>13931299326</span></li>
                            <li><span>创建时间：</span><span>2023-10-03</span></li>
                            <li><span>更新时间：</span><span>2023-10-03</span></li>
                        </ul>
                    </div>
                    <div class="linkness">
                        <div class="title1">
                            <p>23</p>
                            <p>文章</p>
                        </div>
                        <div class="title2">
                            <p>34</p>
                            <p>评论</p>
                        </div>
                        <div class="title3">
                            <p>23</p>
                            <p>收藏</p>
                        </div>
                    </div>
                    <div style="margin-left: 45%; margin-top: 20px;">
                        <span class="iconfont icon-github" style="font-size: 20px;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
ul{
    margin: 0;
    padding: 0;
}
li{
    text-align: none;
}
.personinfo{
    margin-top: 20px;
    width: 25%;
    height: 600px;
    background-color: #eee;
    .headerInfo{
        position: relative;
        height: 40%;
        .avatar{
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
            top:10%;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .content{
            // margin: 0 30px;
            position: absolute;
            top:80%;
            .detialinfo ul{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                li{
                    width: 46%;
                }
            }
            .linkness{
                display: flex;
                margin: 0 30px;
                justify-content:space-around;
                div{
                    padding: 0 30px;
                }
                .title1{
                    width: 33%;
                    border-right: 1px solid black;
                }
                .title2{
                    width: 33%;
                    border-right: 1px solid black;
                }
                .title3{
                    width: 33%;
                }
            }
        }
    }
}

</style>